<template>
  <view>
    <view class="content">
      <u-navbar bgColor="none" left-icon-color="#ffffff" autoBack fixed placeholder></u-navbar>
      <view class="qrcode_wrap">
        <view class="qrcode">
          <uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrValue"></uqrcode>
        </view>
        <view class="buttons">
          <view class="button" @click="goScan()">
            <image src="/static/tab4/icon_scan.png" mode="scaleToFill"></image>
          </view>
          <view class="button" @click="downQrcode()">
            <image src="/static/tab4/icon_down.png" mode="scaleToFill"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
   import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
		qrValue: ''
      }
    },
    computed: {
       ...mapGetters(['id'])
    },
    mounted() {
      this.qrValue = '/pages/tab3/person/person?id=' + this.id
    },
    methods: {
      goScan() {
        uni.scanCode({
          onlyFromCamera: false,
          scanType: ['qrCode', 'barCode'],
          success: ({ result, scanType, charSet, path }) => {
            uni.navigateTo({
               url: result
            })
          },
        })
      },
      downQrcode() {
        uni.canvasToTempFilePath({
          canvasId: 'qrcode',
          success: (res) => {
            if(res.tempFilePath) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: (res) => {
                  this.$toast.show({
                    msg: '保存成功，可在相册查看'
                  })
                },
                fail: (err) => {
                  this.$toast.show({
                    msg: '保存失败'
                  })
                }
              })
            }
          } 
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100vh;
    background-image: url('/static/tab4/bg_qrcode.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    &::v-deep .u-navbar__content {
      background-color: transparent !important;
    }

    .qrcode_wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: auto;
      height: 350px;

      .qrcode {
        background-color: #ffffff;
        width: 200px;
        padding: 20px;
      }

      canvas {
        display: block;
        width: 200px;
        height: 200px;
      }
    }

    .buttons {
      display: flex;
      margin: 20px;
      
      .button {
        position: absolute;
        bottom: 0;
        width: 32px;
        height: 32px;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 50%;

        &:first-child {
          left: 0;
        }

        &:last-child {
          right: 0;
        }
      }
      
      image {
        width: 32px;
        height: 32px;
      }
    }
  }
</style>